<!-- Breadcrumb  -->
<section class="breadcrumb-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-12 text-center">
        <div class="breadcrumb-content">
          <h2>Our Activities</h2>
          <ul>
            <li><a routerLink="index">首页</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /.breadcrumb-section  -->
<!-- Classes Section -->
<section class="classes-section-2">
  <div class="container">
    <!--TAB框-->
<!--    <h1>今日导读</h1>
    <hr>
    <div class="row">
      <div class="col-sm-8 col-xs-12">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          &lt;!&ndash; Indicators &ndash;&gt;
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          &lt;!&ndash; Wrapper for slides &ndash;&gt;
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <a routerLink="#"><img src="http://d.5857.com/duiz_160520/001.jpg" alt="..."></a>
              <div class="carousel-caption">
                老王食屎
              </div>
            </div>
            <div class="item">
              <img src="http://img2.3lian.com/2014/f4/98/d/51.jpg" alt="...">
              <div class="carousel-caption">
                很开心
              </div>
            </div>
            <div class="item">
              <img src="http://img1.3lian.com/img013/v4/7/d/4.jpg" alt="...">
              <div class="carousel-caption">
                很快乐
              </div>
            </div>
          </div>

          &lt;!&ndash; Controls &ndash;&gt;
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
      <div class="col-sm-4 col-xs-12">
        <div class="accordion-one">
          <h4>育儿知识</h4>
          <div class="panel-group" id="accordion" role="tablist">
            <div class="panel panel-default" role="tab">
              <div class="panel-heading" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                     aria-controls="collapseOne">
                    人工喂养宝宝的宜与忌
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                  朵朵出生已经五天了。
                  　　让陈蓉感到欣慰的是，她的奶水一直都很充足。每当看着小朵朵贪婪地吮吸着乳汁时，她都会觉得特别的幸福和满足。
                  相比之下，与她同一病室的柳依就没那么幸福了。……<a routerLink="/article">更多</a>
                </div>
              </div>
            </div>
            <div class="panel panel-default" role="tab">
              <div class="panel-heading" id="headingTwo">
                <h4 class="panel-title">
                  <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                     aria-controls="collapseTwo">
                    Does not reflect adjustments for fees, costs, or medical liens
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                </div>
              </div>
            </div>
            <div class="panel panel-default" role="tab">
              <div class="panel-heading" id="headingThree">
                <h4 class="panel-title">
                  <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion"
                     href="#collapseThree" aria-controls="collapseThree">
                    Does not reflect adjustments for fees, costs, or medical liens
                  </a>
                </h4>
              </div>
              <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>-->
    <!--./TAB框-->
    <!--搜索框-->
    <h1 class="h2style">活动互动</h1>
    <hr>
    <div class="row">
      <div class="col-sm-12 col-xs-12">
        <div class="class-sort-btn-section">
          <ul class="sort-btn pull-left">
            <li class="filter" data-filter="mix"><a (click)="filter('all')">全部</a></li>  <!--class active-->
            <li class="filter" data-filter="kinder" id="kinder"><a (click)="filter('all')">亲子互动</a></li>
            <li class="filter" data-filter="play" id="play"><a (click)="filter('all')">图书阅读</a></li>
            <li class="filter" data-filter="primary" id="primary"><a (click)="filter('all')">趣味旅游</a></li>
            <li class="filter" data-filter="story" id="story"><a (click)="filter('all')">户外运动</a></li>
            <li class="filter" data-filter="story1" id="story1"><a (click)="filter('all')">少年宫</a></li>
          </ul>
          <form method="post" action="#" class="class-search pull-right">
            <input type="search" name="search" placeholder="搜索">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <!--/.搜索框-->
    <!--活动列表-->
    <div class="row" style="min-height: 600px">
      <div *ngFor="let activity of activities" class="col-sm-4 col-xs-12" style="display:inline-block;max-height: 444px">
        <div class="single-class">
          <div class="class-img">
            <img alt="" src="../../images/class1/class1.jpg">
            <div class="class-hover">
              <!--<a routerLink="class" class="popup"><i class="icon-link"></i></a>-->
            </div>
          </div>
          <div class="class-details">
            <h3 ><a [routerLink]="['/activity', activity.id]" style="font-size: 20px">{{activity.title}}</a></h3>
            <p>{{activity.theme}}</p>
            <p>报名截止时间:{{activity.deadline | date}}</p>
            <div class="clearfix">
              <div class="class-meta pull-left">
                <span>阅读人数</span>
                <p>{{activity.readNumber ? activity.readNumber : 0 }}</p>
              </div>
              <div class="class-meta pull-left">
                <span>评价</span>
                <p>{{activity.likeNumber ? activity.likeNumber : 0 }}</p>
              </div>
              <div class="class-meta pull-left">
                <span>报名人数</span>
                <p>{{activity.willNumber ? activity.willNumber : 0 }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--        <div class="col-sm-4 col-xs-12 mix kinder play story1">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class1.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class1.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class">标题</a></h3>
                    <p>{{a.theme}}</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>阅读人数</span>
                        <p>23</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>喜欢人数</span>
                        <p>24</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>报名人数</span>
                        <p>129</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-xs-12 mix primary story">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class2.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class2.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class">图书阅读</a></h3>
                    <p>主题</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>年龄范围</span>
                        <p>3-5</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动人数</span>
                        <p>20</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动费用</span>
                        <p>￥140</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-xs-12 mix kinder primary">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class3.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class3.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class">少年宫</a></h3>
                    <p>主题</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>年龄范围</span>
                        <p>4-6</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动人数</span>
                        <p>15</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动费用</span>
                        <p>￥150</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-xs-12 mix story kinder">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class4.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class4.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class">户外运动</a></h3>
                    <p>主题</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>年龄范围</span>
                        <p>2-3</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动人数</span>
                        <p>24</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动费用</span>
                        <p>￥129</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-xs-12 mix kinder play">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class5.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class5.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class.html">户外运动</a></h3>
                    <p>主题</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>年龄范围</span>
                        <p>3-5</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动人数</span>
                        <p>20</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动费用</span>
                        <p>￥140</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-xs-12 mix primary story">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class6.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class6.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class.html">思维大师</a></h3>
                    <p>主题</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>年龄范围</span>
                        <p>4-6</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动人数</span>
                        <p>15</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动费用</span>
                        <p>￥150</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-xs-12 mix kinder primary">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class7.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class7.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class.html">快乐的孩子</a></h3>
                    <p>主题</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>年龄范围</span>
                        <p>2-3</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动人数</span>
                        <p>24</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动费用</span>
                        <p>￥129</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-xs-12 mix play story">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class8.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class8.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class.html">小羊羔</a></h3>
                    <p>主题</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>年龄范围</span>
                        <p>3-5</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动人数</span>
                        <p>20</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动费用</span>
                        <p>￥140</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4 col-xs-12 mix kinder play">
                <div class="single-class">
                  <div class="class-img">
                    <img alt="" src="../../images/class1/class9.jpg">
                    <div class="class-hover">
                      <a href="../../images/class1/class9.jpg" class="popup"><i class="icon-link"></i></a>
                    </div>
                  </div>
                  <div class="class-details">
                    <h3><a routerLink="class.html">精神控制车</a></h3>
                    <p>主题</p><p>报名截止时间</p>
                    <div class="clearfix">
                      <div class="class-meta pull-left">
                        <span>年龄范围</span>
                        <p>4-6</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动人数</span>
                        <p>15</p>
                      </div>
                      <div class="class-meta pull-left">
                        <span>活动费用</span>
                        <p>￥150</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>-->
      <div class="clearfix"></div>
    </div>
    <!--/.活动列表-->
    <!--分页-->
    <div class="row">
      <div class="col-sm-12 col-xs-12 text-center">
        <ngb-pagination (pageChange)="pageChange($event)" [collectionSize]="100" [(page)]="page" [boundaryLinks]="true"
                        [pageSize]="5" [maxSize]="5" [rotate]="true"></ngb-pagination>
        <!--<ul class="paginations">-->
          <!--<li><a routerLink="#"><i class="icon-prev"></i></a></li>-->
          <!--<li class="active"><a routerLink="#">1</a></li>-->
          <!--<li class=""><a routerLink="#">2</a></li>-->
          <!--<li><a routerLink="#">3</a></li>-->
          <!--<li><a routerLink="#">4</a></li>-->
          <!--<li><a routerLink="#">5</a></li>-->
          <!--<li><a routerLink="#">6</a></li>-->
          <!--<li><a routerLink="#">7</a></li>-->
          <!--<li><a routerLink="#">8</a></li>-->
          <!--<li><a routerLink="#">9</a></li>-->
          <!--<li><a routerLink="#">10</a></li>-->
          <!--<li><a routerLink="#"><i class="icon-next"></i></a></li>-->
        <!--</ul>-->
      </div>
    </div>
    <!--/.分页-->
  </div>
</section>
<!-- /.classes-section -->

<!-- Facilities Section -->
<section class="facility-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-12">
        <div class="title-with-icon text-center">
          <img alt="" src="../../images/home1/facility.png">
          <h2 class="title-2">学校设施</h2>
          <p class="subtitle-2">
            教学楼，食堂，计算机，宿舍<br>
            黑板，卫生间，操场，教师，办公室，体育器材
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3 col-xs-12 text-center">
        <div class="single-facility">
          <i class="icon-trophy"></i>
          <h4>学前体育</h4>
          <p></p>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 text-center">
        <div class="single-facility two">
          <i class="icon-food"></i>
          <h4>健康的饮食</h4>
          <p></p>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 text-center">
        <div class="single-facility three">
          <i class="icon-lay"></i>
          <h4>多媒体类</h4>
          <p></p>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 text-center">
        <div class="single-facility four">
          <i class="icon-color"></i>
          <h4>音乐艺术课</h4>
          <p></p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /.facility-section -->
